<template>
    <el-card>
        <el-timeline>
        <el-timeline-item timestamp="2021/10" placement="top">
          <el-card>
            <h4>2021年四川省青少年武术套路（A类）锦标赛-泸州</h4>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2022/10" placement="top" type='primary'>
          <el-card>
            <h4>2022年四川省青少年武术套路（A类）锦标赛-成都</h4>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <h2 style="text-align: center;">报名情况</h2>
      <div id="chart" class="circle-panel"></div>
    </el-card>
</template>

<script>
import { onMounted } from "vue";
import { useStore } from "vuex";

import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

var myChart 
var option;

export default {
    name: "dashboard",
    setup() {
        const store = useStore();
        onMounted(()=>{
            myChart = echarts.init(document.getElementById('chart'));
            showWatchRate();
        })


        const showWatchRate = ()=>{
            option = {
              
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '5%',
                left: 'center'
              },
              series: [
                {
                  name: '参赛人员分布',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '40',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    { value: 1048, name: '高中' },
                    { value: 735, name: '高校' },
                    { value: 580, name: '初中' },
                    { value: 300, name: '小学' }
                  ]
              }
              ]
          };

          option && myChart.setOption(option);

        }
        return {
           
        };
    },
};
</script>

<style scoped>
.circle-panel{
  left: 15px;
  right: 15px;
  top: 15px;
  width: 100%;
  height: 500px;
}
</style>